<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>

<div id="list1" class="list">
	<div>Item 1.1
		<div class="list n1">
			<div>Item 2.1</div>
			<div>Item 2.2
				<div class="list n2">
					<div>Item 3.1</div>
					<div>Item 3.2</div>
					<div>Item 3.3</div>
					<div>Item 3.4</div>
				</div>
			</div>
			<div>Item 2.3</div>
			<div>Item 2.4</div>
		</div>
	</div>
	<div>Item 1.2</div>
	<div>Item 1.3</div>
	<div>Item 1.4
		<div class="list n1">
			<div>Item 2.1</div>
			<div>Item 2.2</div>
			<div>Item 2.3</div>
			<div>Item 2.4</div>
		</div>
	</div>
	<div>Item 1.5</div>
</div>

<style>
	.n1 > div {
		background-color: lightblue;
	}

	.n2 > div {
		background-color: lightgreen
	}

	.list {
		padding: 50px;
	}

</style>

<script src="../Sortable.js"></script>

<script type="text/javascript">
	var elements = document.getElementsByClassName('list');

	for (var i = 0; i < elements.length; i++) {
		new Sortable(elements[i], {
			group: 'shared',
			invertSwap: true
		});
	}
</script>

</body>
</html>
